<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Demo</title>
<script src="${basePath}jQuery Core 1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//获取ajax引擎对象
function getAjaxEngine(){
	//ajax引擎对象
	var ajaxEngine=null;
	//使用异常处理机制获取不同浏览器下的Ajax引擎对象
	try{//ff op safari 浏览器Ajax引擎
	ajaxEngine=new XMLHttpRequest();	
	}catch(e){
		//尝试ie浏览器
		try{
			xmlHttpR=new ActiveXObject("Msxm12.XMLHTTP");
		}catch(e){
			xmlHttpR=new ActiveXObject("Microsoft.XMLHTTP");
			
		}
		
	}
	//返回ajax引擎对象
	return ajaxEngine;
	}
	//定义一个全局的Ajax引擎对象
	var ajaxEngine=null;
	
	//ajax处理函数
	function doPostAjax(){
		//获取Ajax引擎对象
		ajaxEngine = getAjaxEngine();
		//获取成功之后，进行ajax请求处理
		if(ajaxEngine){
			var url="${basePath}AjaxDemoServlet";
			
			ajaxEngine.open("post",url,true);
			var data="txtName="+document.getElementById("txtName").value
			+"&txtAge="+document.getElementById("txtAge").value;
			
			ajaxEngine.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//发送ajax请求
			ajaxEngine.send(data);
			//设置ajax请求会后的回调函数
			ajaxEngine.onreadystatechange=doCallBack;
		}
		//ajax回调函数
		function doCallBack(){
			//Ajax引擎的对象状态已经完成
			if(ajaxEngine.readyState==4){
				//判定服务状态：200表示服务器响应成功
				if(ajaxEngine.status==200){
					alert("获取的服务器响应内容："+ajaxEngine.responseText);
				}else{
					alert("出现错误:"+ajaxEngine.status);
				}
			}
		}
	}
	

</script>
<script type="text/javascript">
function doJqueryAjax(){
$.ajax({
	type:"POST",
	url:"${basePath}AjaxDemoServlet",
	dataType:"text",
	data:$("#myForm").serialize(),
	success:function(data){
		alert("Data Saved:"+data);
	}
});
}
</script>
</head>
<body>
<form id="myForm">
   姓名:<input type="text" id="txtName" name="txtName">年龄：<input
   type="text" id="txtAge" name="txtAge">
   <input type="button"
   value="原生态的ajax" onclick="doPostAjax()">
    <input type="button"
   value="Jquery的ajax" onclick="doJqueryAjax()">
</form>
</body>
</html>